<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!--  -->
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"
prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"
prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>

<link href="../bootstrap/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html {
	padding: 10px 20px 10px 20px;
}
</style>
</head>
<body>
<!-- form中的action与PostController中的RequestMapping路径对应 -->
	<form id="searchForm" action="${pageContext.request.contextPath }/posts/search">
		<div class="form-row">
			<div class="form-group col-md-5" style="padding-left:0px;">
				<label for="title">文章标题</label> 
				<!-- value对应后台传来的值,name是传去后台的值 -->
				<input type="text" class="form-control" id="title" name="title" value="${post.title }">
			</div>
				
			<div class="form-group col-md-3">
				<label for="category">文章分类</label> 
				<select id="category" class="form-control" name="category.id">
				<!-- 如果不写value=-1就会提交  请选中分类：这几个字 -->
					<option value="-1" selected>请选中分类：</option>
				<c:forEach var="c" items="${categories }">
				<!-- value代表要传到后台的值 -->
					<c:choose>
						<c:when test="${cid!=null&&cid==c.id }">
							<option value="${c.id }" selected>${c.name }</option>
						</c:when>
						<c:otherwise>
							<option value="${c.id }">${c.name }</option>
						</c:otherwise>
					</c:choose>
				</c:forEach>
				</select>
			</div>

			<div class="form-group col-md-3">
				<label for="created">创建时间</label> 
				<input type="text" class="form-control" id="created" name="created" value='<fmt:formatDate value="${post.created }" pattern="yyyy-MM-dd"/>'>
			</div>
			
			<div class="form-group col-md-1">
				<label>&nbsp;</label> 
				<button type="submit" id="btnSearch" class="form-control btn btn-primary">搜索</button>
			</div>
		</div>
		
		<div class="form-row" style="margin-bottom:10px;">
			<div class="btn-group btn-group-sm" role="group">
				<button type="button" class="btn btn-primary" id="insertPost">添加文章</button>
				<button type="button" class="btn btn-primary" id="batchDelete">批量删除</button>
			</div>
		</div>
		
		<table class="table table-bordered table-striped table-hover"> 
			<thead>
				<tr>
					<th scope="col"></th>
					<th scope="col">#</th>
					<th scope="col">标题</th>
					<th scope="col">创建时间</th>
					<th scope="col">分类</th>
					<th scope="col">操作</th>
				</tr>
			</thead>
			<tbody>
			<c:forEach var="post" items="${posts}">
			
				<tr>	
						<td><input class="form-check-input" type="checkbox" name="ids"></td>
						<th scope="row">${post.id}</th>
						<td>${post.title }</td>
						<td><fmt:formatDate value="${post.created }" pattern="yyyy-MM-dd:HH:mm:ss"/></td>
						<td>${post.category.name }</td>
				
						<td>
						<!-- 不加/  url：loaclhost/ssm/pages/..
						"/ssm/delete_form/${post.id }
							加/  loaclhost/.. -->
							<a href="${pageContext.request.contextPath}/post/edit_form?id=${post.id }">修改</a>
							&nbsp;&nbsp;
							<a href="${pageContext.request.contextPath}/delete_form/?id=${post.id }">删除</a>
						</td>
				
				</tr>
			</c:forEach>
			</tbody>
		</table>
			
	<nav aria-label="Page navigation">
	  <ul class="pagination">
	    <li>
	    <!-- 用js处理上一页按钮 -->
	      <a href="javascript:prePage()" aria-label="Previous">
	        <span aria-hidden="true">&laquo;</span>
	      </a>
	    </li>
	    <!-- 服务器需要告诉jsp一共有多少页，以及jsp当前页是第几页 -->
	    <!-- 如果等于服务器指定页就高亮显示li -->
	    <c:forEach begin="1" end="${totalPage }" var="page">
	    <c:choose>
	    	<c:when test="${page==currentPage }">
	    		<li class="active"><a href="${pageContext.request.contextPath}/post/findPage?page=${page }&size=10">${page }</a></li>
	    	</c:when>
	    	<c:otherwise>
	    		<li><a href="${pageContext.request.contextPath}/post/findPage?page=${page }&size=10">${page }</a></li>
	    	</c:otherwise>
	    </c:choose>
	    </c:forEach>
	  <li>
	    <!-- 用js处理下一页按钮 ，加了方法-->
	      <a href="javascript:nextPage()" aria-label="Next">
	        <span aria-hidden="true">&raquo;</span>
	      </a>
	    </li>
	  </ul>
	</nav>
	</form>
	

	<script src="../js/jquery.min.js"></script>
	<script src="../bootstrap/bootstrap.min.js"></script>
	
	<script type="text/javascript">

		$(function(){
			//表单提交值为-1时拦截(不提交到后台)
			$('#searchForm').submit(function(){
				//如果下拉框选中默认第一个，就把这个提交值清除
				var cid = $('#category').val();
				if(cid==-1){
					//如果什么都没选，将值-1清空
					$('#category').val(null);
				}
			})
			
			//点击批量删除发送ajax请求
			//直接复制的下面的前端代码
			$('#batchDelete').click(function() {
					var ids = [];
					// 获取选中的id
					$('input:checkbox:checked').parent().next().each(function(idx, element) {
						// element是个dom元素，$(element)变成一个jquery对象，
						// console.log($(element).text());
						ids.push($(element).text());
					});
					
					var obj = {"ids": ids};
					// 发送ajax请求
//	 				$.ajax({
//	 					url: '${pageContext.request.contextPath}/post/deleteBatch',
//	 					data: $.param(obj, true),
//	 					success: function(result) {
//	 						// 请求成功后，刷新当前页面
//	 						window.location.reload();
//	 					}
//	 				});
					
					window.location = "${pageContext.request.contextPath}/post/deleteBatch?" + $.param(obj, true);
				});
			
		})
		
		//点击上一页，下一页的方法实现，对应a标签中的href中写的方法
		function prePage(){
				//js也可以用jsp代码
				var currentPage=${currentPage};
				if(currentPage>1){
					var url="${pageContext.request.contextPath}/post/findPage?page="+(currentPage-1)+"&size=10";
					//js动态跳转到某一个url
							window.location =url;
				}
			}
			
			function nextPage(){
				//js也可以用jsp代码
				var currentPage = ${currentPage};
				if(currentPage < ${totalPage}){
					var url="${pageContext.request.contextPath}/post/findPage?page="+(currentPage+1)+ "&size=10";
					//js动态跳转到某一个url
							window.location =url;
				}
			}
		
	</script>
	
</body>
</html>